<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table {
            border-collapse: collapse;
        }

        .grade {
            display: inline-block;
            width: 25px;
            height: 25px;
            line-height: 25px;
            border-radius: 4px;
            text-align: center;
        }

        .grade-A {
            background: #d4edda;
            color: #155724;
        }

        .grade-B {
            background: #d1ecf1;
            color: #0c5460;
        }

        .grade-C {
            background: #fff3cd;
            color: #856404;
        }

        .grade-D {
            background: #f8d7da;
            color: #721c24;
        }

        .grade-F {
            background: #f5f5f5;
            color: #6c757d;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>班级</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>平均分</th>
                <th>等级</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody id="studentList"></tbody>
    </table>

    <script>
        const studentsData = [
            { id: '2024001', name: '张三', class: '高一(1)班', chinese: 85, math: 92, english: 78 },
            { id: '2024002', name: '李四', class: '高一(1)班', chinese: 92, math: 88, english: 95 },
            { id: '2024003', name: '王五', class: '高一(2)班', chinese: 76, math: 82, english: 79 },
            { id: '2024004', name: '赵六', class: '高一(2)班', chinese: 65, math: 58, english: 62 },
            { id: '2024005', name: '钱七', class: '高一(3)班', chinese: 88, math: 94, english: 91 },
            { id: '2024006', name: '孙八', class: '高一(3)班', chinese: 72, math: 68, english: 75 },
            { id: '2024007', name: '周九', class: '高一(1)班', chinese: 95, math: 89, english: 93 },
            { id: '2024008', name: '吴十', class: '高一(2)班', chinese: 58, math: 62, english: 55 },
            { id: '2024009', name: '郑十一', class: '高一(3)班', chinese: 81, math: 76, english: 84 },
            { id: '2024010', name: '王十二', class: '高一(1)班', chinese: 69, math: 71, english: 66 }
        ];

        const studentListEle = document.getElementById('studentList')


        render();




        function render() {
            studentListEle.innerHTML = studentsData.map(item => {
                // 计算每一个学生的平均分
                const averageScore = (item.chinese + item.english + item.math) / 3;
                // 调用函数，传递平均分到函数内部，接收函数内部返回的等级数据
                const gradeInfo = getGrade(averageScore); // { grade: 'A', color: 'green' }
                const status = getStatus(averageScore);
                const bgColor = getTrBgColor(averageScore);

                return (
                    `
                    <tr style="background: ${bgColor}">
                        <td>${item.id}</td>
                        <td>${item.name}</td>
                        <td>${item.class}</td>
                        <td>${item.chinese}</td>
                        <td>${item.math}</td>
                        <td>${item.english}</td>
                        <td>${averageScore.toFixed(1)}</td>
                        <td>
                            <strong class="grade ${gradeInfo.class}">${gradeInfo.grade}</strong>    
                        </td>
                        <td>${status}</td>
                    </tr>
                    `
                )


            }).join('')
        }

        function getTrBgColor(averageScore) {
            if (averageScore >= 90) {
                return 'linear-gradient(90deg, #fff, #e8f5e8)'
            } else if (averageScore < 60) {
                return 'linear-gradient(90deg, #fff, #f8d7da)'
            }
            return 'transparent'
        }


        function getStatus(averageScore) {
            if (averageScore >= 60) {
                return '及格'
            }
            return '不及格'
        }


        function getGrade(averageScore) {
            // 计算每一个学生的等级
            if (averageScore >= 90) {
                return {
                    grade: 'A',
                    class: 'grade-A'
                }
            }
            if (averageScore >= 80) {
                return {
                    grade: 'B',
                    class: 'grade-B'
                }
            }
            if (averageScore >= 70) {
                return {
                    grade: 'C',
                    class: 'grade-C'
                }
            }
            if (averageScore >= 60) {
                return {
                    grade: 'D',
                    class: 'grade-D'
                }
            }
            return {
                grade: 'F',
                class: 'grade-F'
            }
        }
    </script>
</body>

</html>